|
1
|
|
|
import React from "react" |
|
2
|
|
|
import expectRender from "../expect-to-same-render" |
|
3
|
|
|
import type { ClassNames, ClassNamesProperty, ClassNamed, ClassHash } from "../src" |
|
4
|
|
|
import classNaming, {classNamesCheck} from "../src" |
|
5
|
|
|
|
|
6
|
|
|
const Button = ({className, classnames, "classnames": { Btn }} |
|
7
|
|
|
: ClassNamed & ClassNamesProperty<{Btn: ClassHash}> |
|
8
|
|
|
) => <button {...classNaming({className, classnames})(true, { Btn })}/> |
|
9
|
|
|
|
|
10
|
|
|
type RootClassNames = ClassNamesProperty<{ |
|
11
|
|
|
App__Item: ClassHash |
|
12
|
|
|
App__Footer: ClassHash |
|
13
|
|
|
}> |
|
14
|
|
|
type RootProps = RootClassNames & ClassNames<typeof Button> |
|
15
|
|
|
function Root({classnames, "classnames": { App__Item, App__Footer }}: RootProps) { |
|
16
|
|
|
const classes = classNaming({classnames}) |
|
17
|
|
|
, classFooter = classes({App__Footer}) |
|
18
|
|
|
|
|
19
|
|
|
return <> |
|
20
|
|
|
<Button {...{ |
|
21
|
|
|
...classes({ App__Item }), |
|
22
|
|
|
classnames |
|
23
|
|
|
}}/> |
|
24
|
|
|
<div {...classFooter} data-classname={`${classFooter}`} /> |
|
25
|
|
|
</> |
|
26
|
|
|
} |
|
27
|
|
|
|
|
28
|
|
|
it("not css module", () => expectRender( |
|
29
|
|
|
<Root classnames={classNamesCheck()}/> |
|
30
|
|
|
).toSame( |
|
31
|
|
|
<button className="App__Item Btn"></button>, |
|
32
|
|
|
<div className="App__Footer" data-classname="App__Footer"></div> |
|
33
|
|
|
)) |
|
34
|
|
|
|
|
35
|
|
|
it("css module", () => expectRender( |
|
36
|
|
|
<Root classnames={{ |
|
37
|
|
|
App__Footer: "footer-hash", |
|
38
|
|
|
App__Item: "item-hash", |
|
39
|
|
|
Btn: "btn-hash" |
|
40
|
|
|
}}/> |
|
41
|
|
|
).toSame( |
|
42
|
|
|
<button className="item-hash btn-hash"></button>, |
|
43
|
|
|
<div className="footer-hash" data-classname="footer-hash"></div> |
|
44
|
|
|
)) |
|
45
|
|
|
|
|
46
|
|
|
it("VSCode can rename property", () => { |
|
47
|
|
|
type RootProps = ClassNamesProperty<{ |
|
48
|
|
|
App__Container: ClassHash |
|
49
|
|
|
}> |
|
50
|
|
|
|
|
51
|
|
|
function Root({ |
|
52
|
|
|
"classnames": {App__Container: App__Container} |
|
53
|
|
|
}: RootProps) { |
|
54
|
|
|
return <div {...classNaming()({App: App__Container})}/> |
|
55
|
|
|
} |
|
56
|
|
|
|
|
57
|
|
|
function Root2({ |
|
58
|
|
|
"classnames": { |
|
59
|
|
|
// VSCode didn't rename here due to `ClassNames<>` wrapper |
|
60
|
|
|
//@ts-expect-error Property 'App' does not exist |
|
61
|
|
|
App: App__Container |
|
62
|
|
|
} |
|
63
|
|
|
}: ClassNames<typeof Root>) { |
|
64
|
|
|
return <div {...classNaming()({App: App__Container})}/> |
|
65
|
|
|
} |
|
66
|
|
|
|
|
67
|
|
|
expectRender( |
|
68
|
|
|
<Root |
|
69
|
|
|
classnames={ |
|
70
|
|
|
classNamesCheck()} />, |
|
71
|
|
|
<Root2 classnames={classNamesCheck()} /> |
|
72
|
|
|
).toSame( |
|
73
|
|
|
<div className="App"/>, |
|
74
|
|
|
<div className="App"/> |
|
75
|
|
|
) |
|
76
|
|
|
}) |
|
77
|
|
|
|
|
78
|
|
|
it("additional type check after rename", () => { |
|
79
|
|
|
type Props1 = ClassNamesProperty<{ class1: ClassHash }> |
|
80
|
|
|
type Props2 = { |
|
81
|
|
|
classnames: { class2_renamed: ClassHash } |
|
82
|
|
|
} |
|
83
|
|
|
const { class1, |
|
84
|
|
|
//@ts-expect-error Property 'class2' does not exist |
|
85
|
|
|
class2 |
|
86
|
|
|
} = {} as (Props1 & Props2)["classnames"] |
|
87
|
|
|
|
|
88
|
|
|
expectRender( |
|
89
|
|
|
<div {...classNaming<Props1>()({class1})} />, |
|
90
|
|
|
<div { |
|
91
|
|
|
...classNaming<Props2>()({ |
|
92
|
|
|
//@ts-expect-error Object literal may only specify known properties, and 'class2' does not exist |
|
93
|
|
|
class2 |
|
94
|
|
|
}) |
|
95
|
|
|
} /> |
|
96
|
|
|
).toSame( |
|
97
|
|
|
<div className="class1"/>, |
|
98
|
|
|
<div className="class2"/> |
|
99
|
|
|
) |
|
100
|
|
|
}) |
|
101
|
|
|
|
|
102
|
|
|
it("chaining", () => { |
|
103
|
|
|
const props = {className: "Cell", classnames: classNamesCheck()} |
|
104
|
|
|
|
|
105
|
|
|
const {"classnames": { |
|
106
|
|
|
Column_1, Column_2, |
|
107
|
|
|
Row_1, Row_2 |
|
108
|
|
|
}} = props |
|
109
|
|
|
, classes = classNaming(props) |
|
110
|
|
|
, Cell = classes(true) |
|
111
|
|
|
, Col1 = Cell({Column_1}) |
|
112
|
|
|
, Col2 = Cell({Column_2}) |
|
113
|
|
|
|
|
114
|
|
|
expectRender( |
|
115
|
|
|
<div {...Col1({ Row_1 })} />, |
|
116
|
|
|
<div {...Col1({ Row_2 })} />, |
|
117
|
|
|
<div {...Col2({ Row_1 })} />, |
|
118
|
|
|
<div {...Col2({ Row_2 })} />, |
|
119
|
|
|
<div {...classes({ Column_1 })({ Column_2 })({ Row_1 })({ Row_2 })} /> |
|
120
|
|
|
).toSame( |
|
121
|
|
|
<div className="Cell Column_1 Row_1" />, |
|
122
|
|
|
<div className="Cell Column_1 Row_2" />, |
|
123
|
|
|
<div className="Cell Column_2 Row_1" />, |
|
124
|
|
|
<div className="Cell Column_2 Row_2" />, |
|
125
|
|
|
<div className="Column_1 Column_2 Row_1 Row_2" /> |
|
126
|
|
|
) |
|
127
|
|
|
}) |
|
128
|
|
|
|
askirmas /
react-classnaming
